<template>
	<el-card shadow="never">
		<template #header>
			{{ title }}
			<el-tag type="primary" class="float-right">总</el-tag>
		</template>
		<p class="number">
			<SvgIcon name="ele-Document" class="align-middle mr-2" size="32" /><span>{{ number }}</span>
		</p>
	</el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const props = defineProps({
	title: {
		type: String,
		default: '文章数量',
	},
	data: {
		type: Object,
		default: () => ({}),
	},
});

const number = ref(props.data?.article_number||0);
</script>

<style lang="scss" scoped>
.number {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	font-size: 32px;
	font-weight: 400;
	color: #333;
	line-height: 40px;
}
</style>
